/*
 * @Author: xiaosihan 
 * @Date: 2024-12-02 01:12:49 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-12-02 07:56:15
 */

import editorStore from "@/editorComponent/editorStore";
import ColorPick from "@/editorComponent/RightMenu/ColorPick/ColorPick";
import { Tooltip } from "antd";
import { throttle } from "lodash";
import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import { SketchPicker } from "react-color";
import styles from "./step2.module.less";
import clsx from "clsx";

interface Iprops {
  children?: ReactNode
  addNum: boolean;
  addName: boolean;
}

// 步骤2颜色
export default function Step2Color(props: Iprops) {

  const [nameColor, setNameColor] = useState(editorStore.nameColor);
  const [numColor, setNumColor] = useState(editorStore.numColor);

  useEffect(() => {

  }, []);

  useEffect(() => autorun(() => {
    setNameColor(editorStore.nameColor);
    setNumColor(editorStore.numColor);
  }), []);

  return (


    <div className={styles.listItem} >
      <span className={styles.lable} >颜色:</span>
      <Tooltip
        title={
          <div className={styles.color_picker} >
            <SketchPicker
              color={nameColor}
              className={styles.SketchPicker}
              onChange={throttle((color: any) => {
                editorStore.setNameColor(color.hex);
              }, 50)}
            />
            <ColorPick />
          </div>
        }
        onOpenChange={open => {
          // showTop.current = open;
        }}
        trigger={['click']}
        color={"#00000000"}
        placement="bottom"
        afterOpenChange={() => {
          editorStore.setActiveComponent(editorStore.nameSide);
        }}
      >
        <span
          className={clsx(styles.input, !props.addName && styles.disabled)}
        >
          <span className={styles.colorBlock} style={{ backgroundColor: nameColor }} ></span>
        </span>
      </Tooltip>

      <Tooltip
        title={
          <div className={styles.color_picker} >
            <SketchPicker
              color={numColor}
              className={styles.SketchPicker}
              onChange={throttle((color: any) => {
                editorStore.setNumColor(color.hex);
              }, 50)}
            />
            <ColorPick />
          </div>
        }
        onOpenChange={open => {
          // showTop.current = open;
        }}
        trigger={['click']}
        color={"#00000000"}
        placement="bottom"
        afterOpenChange={() => {
          editorStore.setActiveComponent(editorStore.numSide);
        }}
      >
        <span
          className={clsx(styles.input, !props.addNum && styles.disabled)}
        >
          <span className={styles.colorBlock} style={{ backgroundColor: numColor }} ></span>
        </span>
      </Tooltip>

    </div>
  );

}